<?xml version="1.0" encoding="UTF-8"?>
<ui:decorate  template="/xhtml/plantillas/baseSeguridad.xhtml"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:ui="http://java.sun.com/jsf/facelets">    

    <ui:define name="titulo">#{label['planes.pago']}</ui:define>

    <ui:define name="java_script">
    </ui:define>   

    <ui:define name="contenido">

        <h:outputText value="#{label['administracion.planes.pago']}" class="encabezado"/>                
        <hr id="horizontalLine" style="width: 770px; margin-left: 20px"/>
        <h:panelGrid  columns="10" class="panelFormulario" >
            <p:accordionPanel id="id_acordion" activeIndex="#{beanPlanesPago.numero}" style="margin-top: 5px; width: 770px" >  
                <p:tab title="#{label['plan.pago']}">         

                    <p:fieldset legend="Información General">
                        <p:panelGrid>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['nombre']}"/>               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_nombre" value="#{beanPlanesPago.nombre}"  style="width: 300px" maxlength="100"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['descripcion']}" />               
                                </p:column>
                                <p:column>
                                    <p:inputTextarea id="id_descripcion" value="#{beanPlanesPago.descripcion}"  style="width: 300px; height: 30px" cols="30" maxlength="200"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="margin-top: 10px">
                                    <h:outputText  styleClass="etiqueta" value="#{label['especialidad']}" />               
                                </p:column>
                                <p:column style="margin-top: 10px; ">
                                    <p:selectOneMenu id="id_especialidad"
                                                     effect="fade"
                                                     style="width: 310px;"
                                                     value="#{beanPlanesPago.especialidad}"                                                  
                                                     >
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanPlanesPago.lista_especialidades}"
                                                       var="especialidad"
                                                       itemLabel="#{especialidad.nombre}"
                                                       itemValue="#{especialidad.id_especialidad}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>         
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['pago.inicial']}" />               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_pago_inicial" value="#{beanPlanesPago.pagoInicial}" 
                                                 style="width:110px; text-align: right" maxlength="11"
                                                 onkeypress="javascript:return soloNumerosDecimales(event);"                                         >
                                        <f:converter converterId="NumeroConverter" />
                                        <f:attribute name="patron" value="#,##0.00"/>  
                                        <f:attribute name="maximoDigitos" value="8"/>  
                                        <p:ajax event="change" update="@this"/>
                                    </p:inputText>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['pago.mensual']}" />               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_pago_mensual" value="#{beanPlanesPago.pagoMensual}"  
                                                 style="width:110px; text-align: right" maxlength="11"
                                                 onkeypress="javascript:return soloNumerosDecimales(event);"                                         >
                                        <f:converter converterId="NumeroConverter" />
                                        <f:attribute name="patron" value="#,##0.00"/>  
                                        <f:attribute name="maximoDigitos" value="8"/>  
                                        <p:ajax event="change" update="@this"/>
                                    </p:inputText>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['pago.total']}" />               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_pago_total" value="#{beanPlanesPago.pagoTotal}"  
                                                 style="width:110px; text-align: right" maxlength="11"
                                                 onkeypress="javascript:return soloNumerosDecimales(event);"                                         >
                                        <f:converter converterId="NumeroConverter" />
                                        <f:attribute name="patron" value="#,##0.00"/>  
                                        <f:attribute name="maximoDigitos" value="8"/>  
                                        <p:ajax event="change" update="@this"/>
                                    </p:inputText>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['duracion']}" />               
                                </p:column>
                                <p:column>
                                    <p:selectOneMenu id="id_duracion"
                                                     effect="fade"
                                                     style="width: 115px;"
                                                     value="#{beanPlanesPago.duracion}"                                                  
                                                     >
                                        <f:selectItem itemLabel="" itemValue="" />
                                        <f:selectItems value="#{beanPlanesPago.lista_duracion}"
                                                       var="dura"
                                                       itemLabel="#{dura.leyenda}"
                                                       itemValue="#{dura.valor}" />
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>          
                        </p:panelGrid>
                    </p:fieldset>
                    <p:column><p:commandButton value="#{label['limpiar']}" action="#{beanPlanesPago.limpiar()}" style="margin-left: 375px"
                                               icon="ui-icon-arrow-4-diag" update=":form_conci" /></p:column>
                    <p:column><p:commandButton value="#{label['eliminar']}" disabled="#{!beanPlanesPago.modificar}"
                                               icon="ui-icon-trash" onclick="confirmation.show()" /></p:column>
                    <p:column><p:commandButton value="#{label['guardar']}" action="#{beanPlanesPago.guardarPlanPago()}" 
                                               icon="ui-icon-disk" update=":form_conci" /></p:column>

                    <f:facet name="footer">             
                        <p:commandButton id="id_guardar" value="#{label['guardar']}"                                
                                         action="/xhtml/index" process="@this"/>                
                        <p:commandButton value="#{label['cancelar']}" action="/xhtml/index" process="@this" />    
                    </f:facet>            

                </p:tab>  
            </p:accordionPanel>  
        </h:panelGrid>        
        <p:fieldset legend="#{label['lista.planes.pago']}" style="width: 755px">
            <p:dataTable id="dataTable" var="plan"  
                         rows="5" value="#{beanPlanesPago.lista_planes}" 
                         selectionMode="single" 
                         selection="#{beanPlanesPago.planTabla}"
                         rowKey="#{plan.id_plan_pago}"
                         paginator="true"
                         filterEvent="enter"
                         paginatorPosition="bottom"
                         rowsPerPageTemplate="5,10,15">  

                <p:ajax  event="rowSelect"  update=":form_conci" 
                         listener="#{beanPlanesPago.seleccionarPlanPago()}">
                </p:ajax>
                <p:column headerText="#{label['nombre']}" style="text-align: center" filterBy="#{plan.nombre}" filterMatchMode="contains">                      
                    <h:outputText value="#{plan.nombre}" />  
                </p:column>  

                <p:column headerText="#{label['descripcion']}" style="text-align: center" filterBy="#{plan.descripcion}" filterMatchMode="contains">                      
                    <h:outputText value="#{plan.descripcion}" />  
                </p:column>                
            </p:dataTable>  
        </p:fieldset>
        <p:confirmDialog id="confirmDialog" message="Esta seguro que desea eliminar la especialidad seleccionada?"  
                         header="Eliminar Especialidad" severity="alert" widgetVar="confirmation">  

            <p:commandButton id="confirm" value="#{label['aceptar']}" action="#{beanPlanesPago.eliminarPlanPago()}"
                             oncomplete="confirmation.hide()" update=":form_conci" />  
            <p:commandButton id="decline" value="#{label['cancelar']}" onclick="confirmation.hide()" type="button" />   

        </p:confirmDialog>                     
    </ui:define>
</ui:decorate>
